<template>
    <div style="height: 360px;">
        <span>
            <span style="font-size:30px;color: rgb(102,102,102);margin-bottom: 5px;">个性推荐</span>
            <span style="float: right;color: rgb(102,102,102);margin-top: 18px;">更多></span>
        </span>
        <div>
            <div v-for="i in recommend" :key="i.id" style="margin-top: 30px;">
                <el-row>
                    <div style="width: 80%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{
                        i.title }}</div>
                    <div style="float: right;font-size: small;color: rgb(102,102,102);margin-top: 3px;margin-left: 5px;">{{
                        i.data }}</div>
                </el-row>
            </div>
        </div>
    </div>
</template>
<script>
import { ref } from 'vue';
export default {
    name: "recommendComponents",
    setup() {
        let recommend = ref([{
            id: 0,
            title: "自治区文化和旅游厅 自治区教育厅关于 举办首届广西大学生红色旅游创意 策划大赛决赛的通知",
            data: "2002-12-21",
        }, {
            id: 1,
            title: "首届广西大学",
            data: "2023-9-18",
        },
        ])
        return {
            recommend,
        }
    }
}

</script>

<style scoped></style>